<script setup lang="ts">
import gsap from 'gsap';
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { onMounted, type Ref, ref, provide } from 'vue'
import { useRouter } from "vue-router";
import classicGun from './components/classicGun.vue';
import famousFirearm from './components/famousFirearm.vue';
import GunAssembly from './components/GunAssembly.vue';
gsap.registerPlugin(ScrollTrigger);
let router = useRouter()
// 路由数组
const routeArr: string[] = ['/sqm', '/zxy', '/yj', '/gr', '/fqm', '/xsh', '/zc',]
// 获取当前所选中的按钮所处位置
let checkedIndex: number
// 按钮选中
let checked: string = router.currentRoute.value.path

for (let index = 0; index < routeArr.length; index++) {
    if (routeArr[index] == checked) {
        checkedIndex = index
    }
}

// 页面加载部分
let centerShow: Ref<boolean> = ref(false)
let loadingShow: Ref<boolean> = ref(true)
let loadingNumber: Ref<number> = ref(1)

const gunAssembly: any = ref(null)
const nav: any = ref(null)
const header: any = ref(null)

provide("centerShow", centerShow)

function checkedfn<T>(path: T): boolean {
    if (checked == path) {
        return true
    }
    return false
}

// 按钮背景移动动画
function confirmAnimation(): void {
    const duration: number = 0.3
    const a = nav.value.children
    nav.value.addEventListener("mouseleave", () => {
        gsap.to(".confirm", { duration: duration, x: `${checkedIndex * 100}%`, })
    })

    for (let index = 0; index < a.length; index++) {
        a[index].addEventListener("mouseenter", () => {
            let x = `${index * 100}%`
            gsap.to(".confirm", { duration: duration, x: x })
            // console.log(x)
        })
        a[index].addEventListener("mouseleave", () => {
            gsap.to(".confirm", { duration: duration, x: 0, })
        })

    }
}

// 枪支运动动画
onMounted(() => {
    // 设置滑块起始位置
    gsap.to(".confirm", { duration: 0.3, x: `${checkedIndex * 100}%`, })
    //  滑块运动动画
    confirmAnimation()
    console.log(router.currentRoute.value.path);
})


// 顶部菜单栏运动动画
function headerAn(): void {
    const An = gsap.timeline({
        scrollTrigger: {
            pin: true,
            markers: false,
            trigger: ".nav",
            start: "0px",
            end: 2,
            scrub: 2,
        }
    })
    An.to(".nav", { opacity: 0 })
}
// 初始化加载动画
function loadingAn(): void {
    let aWidth: number = nav.value.children[1].offsetWidth
    const y: number = header.value.offsetTop
    let x: number = nav.value.children[checkedIndex].offsetLeft + nav.value.offsetLeft
    const loadingAn = gsap.timeline()
    loadingAn.to(loadingNumber, { duration: 3, value: 100, ease: "circ.inOut", })
        .to(".loadingCenter", { duration: 1, width: aWidth + "px", height: "50px", delay: 0.5 })
        .to(".loadingText", { duration: 1, opacity: 0, scale: 0.2 }, "<")
        .to(".loadingCenter", { duration: 1, top: y + "px", left: x + "px", x: "50%", y: "50%" })
        .to(".loadingCenter", { duration: 2, opacity: 0, delay: 1 }, "<")
        .to(".bg", { duration: 2, opacity: 1 }, '-=3')
        .set(centerShow, { value: true, onComplete: gunAssembly.value.pistolAn }, '<')
        .to(".center", { duration: 2, opacity: 1, delay: 1, }, "<")
        .set(loadingShow, { value: false, delay: 1, }, '<')
        .to(".loadingCenter", { duration: 1, opacity: 0, })
}
onMounted(() => {
    // 菜单栏动画
    headerAn()
    loadingAn()

})
</script>

<template>
    <!-- 仅要求存在可以跳转到其他人的页面的顶部栏，具体样式自行实现 -->
    <div class="bg">
    </div>
    <!--页面加载 -->
    <div class="loadingCenter" v-show="loadingShow">
        <span class="loadingText"> loading {{ Math.floor(loadingNumber) }}%</span>
    </div>
    <div class="center" :style="centerShow ? '' : 'visibility: hidden;'">
        <div class="header" ref="header">
            <nav class="nav" ref="nav">
                <RouterLink to="/sqm" :class="checkedfn('/sqm') ? 'checked' : ''">SQM</RouterLink>
                <RouterLink to="/zxy" :class="checkedfn('/zxy') ? 'checked' : ''">ZXY</RouterLink>
                <RouterLink to="/yj" :class="checkedfn('/yj') ? 'checked' : ''">YJ</RouterLink>
                <RouterLink to="/gr" :class="checkedfn('/gr') ? 'checked' : ''">GR</RouterLink>
                <RouterLink to="/fqm" :class="checkedfn('/fqm') ? 'checked' : ''">FQM</RouterLink>
                <RouterLink to="/xsh" :class="checkedfn('/xsh') ? 'checked' : ''">XSH</RouterLink>
                <RouterLink to="/zc" :class="checkedfn('/zc') ? 'checked' : ''">ZC</RouterLink>
                <div class="confirm"></div>
            </nav>
        </div>

        <!-- 枪支组装 -->
        <GunAssembly ref="gunAssembly"></GunAssembly>
        <!-- 经典枪支text -->
        <classicGun></classicGun>
        <!-- 枪支图片 -->
        <famousFirearm></famousFirearm>
    </div>
</template>
<style lang="scss" scoped>
.loadingCenter {
    position: fixed;
    width: 600px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #a8a8a8;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    font-weight: 500;
    color: white;

    .loadingText {
        white-space: nowrap;
    }
}

.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background: #3a6186;
    /* fallback for old browsers */
    background: linear-gradient(to bottom, #89253e, #3a6186);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */


}

.center {
    opacity: 0;
    overflow: hidden;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
}

nav {
    position: relative;
    display: flex;
    overflow: hidden;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 50px;
    margin: auto;
    background-color: rgb(255, 255, 255);

    .confirm {
        position: absolute;
        background-color: #a8a8a8;
        width: 14.28%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 10px;
    }

    a {
        z-index: 2;
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s;
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
    }
}</style>
